<template>
  <!-- <h2>就诊记录模板</h2> -->
  <div class="records">
    <div class="records-head">
      <div class="records-left">
        <div class="date">{{recordData.showTime}}</div>
        <div class="info">{{recordData.detailType}}</div>
        <div class="address">
          <div class="btn">
            <span>{{recordData.status}}</span>
          </div>
          <span class="text">{{'【' + recordData.subCompanyName + '】'}}</span>
        </div>
      </div>
      <div class="records-right">
        <div class="btn-group">
          <el-button-group>
            <el-button  icon="el-icon-edit" v-jurisdiction="'customer:record:detail:update'" v-if="recordData.status === '预约'" @click="handleEditItem()">修改</el-button>
            <el-button  icon="el-icon-share" v-jurisdiction="'customer:record:detail:log'"  @click="handleClickLog(recordData.id)">日志</el-button>
            <el-button  icon="el-icon-delete" v-if="recordData.status === '预约'" @click="handleClickCancel(recordData)">取消预约</el-button>
          </el-button-group>
        </div>
      </div>
    </div>
    <div class="records-content">
      <!-- <div class="title">预约科室:</div> -->
      <div class="doctor">
        <div>
          <span class="name">医生: </span>
          <span class="name-info">{{recordData.masterUserName}}</span>
        </div>
        <div v-if="recordData.secondaryUserName">
          <span class="name">咨询师: </span>
          <span class="name-info">{{recordData.secondaryUserName}}</span>
        </div>
      </div>
      <div class="project" v-if="recordData.subscribeLog">
        <span class="name">项目: </span>
        <span class="name-info">{{recordData.subscribeLog.itemNames}}</span>
      </div>
      <div class="project" v-if="recordData.remark">
        <span class="name">备注: </span>
        <span class="name-info">{{recordData.remark}}</span>
      </div>
      
    </div>
    <div class="records-footer">
      <div class="footer-left">
        <div class="btns">
          <el-button v-jurisdiction="'customer:sick:history:show'"  @click="goElectronicMedical">电子病历</el-button>
          <el-button v-jurisdiction="'customer:sick:image:show'" @click="goImage">影像</el-button>
          <el-button v-jurisdiction="'customer:order:show'" @click="goCharge">收费</el-button>
        </div>
      </div>
      <div class="footer-right">
        <!-- <div class="info">哈哈哈 </div>
        <div class="info1">创建于 </div>
        <div class="info2">2021-06-15 16: 58: 58</div> -->
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType, reactive, toRefs } from '@vue/runtime-core';
import { useRoute, useRouter } from 'vue-router'

type DoctorInfo = {
  id: number,
  masterUserName: string,
  showTime: string,
  detailType: string,
  subCompanyName: string,
  status: string,
  secondaryUserName: string,
  subscribeLog: any,
  remark?: string
}
export default defineComponent({
  props:{
    recordData:{
      type: Object as PropType<DoctorInfo>,
      default: {}
    },
    rowData: {
      type: Object as PropType<any>
    }
  },
  emits: ['goMedical', 'goImage', 'goCharge', 'handleEditItem', 'handleClickLog', 'handleClickCancel'],
  setup(props, ctx) {
    console.log(props.recordData)
    // const state = reactive({
    //   doctor: props.recordData?.masterUserName,
    //   time: props.recordData?.showTime,
    //   detailType: props.recordData?.detailType,
    //   subCompanyName: props.recordData?.subCompanyName,
    //   secondaryUserName: props.recordData?.secondaryUserName,
    //   status :props.recordData?.status,
    //   subscribeLog: props.recordData?.subscribeLog,
    // })
    
    const route = useRoute()
    const router = useRouter()
    const id = route.params.id
    console.log(id, '看路由id')
    
    const goElectronicMedical = () => {
      router.push({path: `/allPatientDetails/${id}/medicalRecord`, query: {type: 5}})
    }

    const goImage = () => {
      router.push({path: `/allPatientDetails/${id}/image`, query: {type: 6}})
    }

    const goCharge = () => {
      router.push({path:`/allPatientDetails/${id}/chargeModel`, query:{type: 4}})
    }

    const handleEditItem = () => {
      ctx.emit('handleEditItem', props.rowData)
    }

    const handleClickLog = (id: number) => {
      ctx.emit('handleClickLog', id)
    }

    const handleClickCancel = (data: any) => {
      console.log(data)
      let { id } = data;
      ctx.emit('handleClickCancel', id)
    }

    return {
      // ...toRefs(state),

      goElectronicMedical,
      goImage,
      goCharge,
      handleEditItem,
      handleClickLog,

      handleClickCancel
    }
  }
})
</script>

<style lang="scss" scoped>
@import '@style/extend';
.records {
  width: 80%;
  height: 100%;
  overflow-y: auto;
  // border: 1px solid #ccc;
  border-radius: 10px;
  box-shadow: 1px  1px 3px #ccc;
  background: $a2-Color;
  .records-head {
    height: 40px;
    // background: red;
    display: flex;
    // justify-content: space-around;
    .records-left {
      flex: 6;
      display: flex;
      flex-direction: row;
      .date {
        line-height: 40px;
        padding: 0 15px 0 20px;
        font-weight: 700;
      }
      .info {
        line-height: 40px;
        font-weight: 700;
      }
      .address {
        display: flex;
        align-items: center;
        padding: 0 15px 0 20px;
        .text {
          @extend .standard-3 
        }

        .btn {
          padding: 2px 5px;
          background-color: #67C23A;
          color: #fff;
          font-size: 14px;
          border-radius: 4px;
        }
      }
    }
    .records-right {
      flex: 2;
      text-align: right;
      padding: 10px 15px 0 0;
    }
  }
  .records-content {
    height: auto;
    // background: green;
    .title {
      padding: 10px 10px 10px 20px;
      font-size: $fontSize;

    }
    .doctor {
      padding: 10px 0 10px 20px;
      font-size: $fontSize;
      display: flex;
      .name-info {
        font-weight: 700;
        @extend .standard-4 
      }

      & > div:nth-child(2) {
        padding-left: 10px;
      }
    }
    .project {
      padding: 10px 0 10px 20px;
      font-size: $fontSize;
      .name-info {
        font-weight: 700;
        @extend .standard-4 
      }
    } 
  }
  .records-footer {
    height: 48px;
    // background: blue;
    width: 100%;
    display: flex;
    .footer-left {
      flex: 2;
      line-height: 48px;
      padding: 0 15px 0 20px;
    }
    .footer-right {
      line-height: 48px;
      text-align: right;
      display: flex;
      padding: 0 15px 0 0;
      font-size: $fontSize;
      .info {
        padding-right: 5px;

      }
      .info1 {
        padding-right: 5px;
      }
    }
  }
}
</style>